<script setup>
import {
  ref,
  reactive,
  computed,
  watch,
  onBeforeMount,
  onMounted,
  onActivated,
  onDeactivated
} from 'vue'
import { title, obj, setTitle } from './test.js'
import Test from './component/Test.vue'
const userRef = ref(null)
const myHome = ref(null)
const titleTest = ref('我是test')
const userName = ref('tony')
const age = ref(21)
onBeforeMount(() => {
  console.log('onBeforeMount')
})
onMounted(() => {
  console.log('onMounted')
})
const newAge = computed({
  get() {
    return age.value
  },
  set(val) {
    age.value = val
  }
})
const state = reactive({
  title: '标题',
  content: '内容',
  obj: {
    a: 1
  }
})
watch(
  [userName, age],
  (a, b) => {
    console.log(a)
    console.log(b)
  },
  {
    flush: 'post'
  }
)
watch(state, (n, o) => {})
const change = () => {
  userName.value = 'tom'
  age.value = Math.floor(Math.random() * 10 + 10)
  state.obj.a = '新标题'
  console.log(title, obj.content)
}
const changeAge = () => {
  newAge.value = Math.floor(Math.random() * 10 + 10)
}
const changeColor = () => {
  setTitle()
  obj.content = 32323
}
// 迭代器
const arr = [1, 2, 3, 4]
const object = {
  a: 1,
  b: 2,
  c: 3
}
function* generateFun() {
  yield setTimeout(() => {
    console.log(1)
  })
  yield setTimeout(() => {
    console.log(2)
  })
  yield setTimeout(() => {
    console.log(3)
  })
}
const content = ref('content')
const fun = generateFun()
console.log(fun.next())
for (let val in object) {
  console.log(val)
}
const changeModel = () => {
  content.value = Math.random()
  titleTest.value = 'xixi title'
}
</script>

<template>
  <div class="w-[200px] h-[100px] bg-gradient-to-l from-[red] to-[blue]"></div>
  <div class="p-[10px] space-y-2 my-home" ref="myHome">
    <Test v-model="titleTest" v-model:content="content"></Test>
    <div @click="changeModel">改变</div>
    <div ref="userRef">姓名： {{ userName }}</div>
    <div>年龄：{{ age }}</div>
    <div>实际年龄： {{ newAge }}</div>
    <el-button type="primary" @click="change">修改</el-button>
    <el-button type="primary" @click="changeAge">修改实际年龄</el-button>
    <div>css变量</div>
    <div class="my-css">我是文本颜色</div>
    <el-button type="primary" size="small" @click="changeColor">改变变量</el-button>
    <div style="width: 500px; height: 300px; background-color: #ccc; display: flex; gap: 20px">
      <div
        style="
          height: 50px;
          flex: 1;
          background-color: red;
          order: 1;
          align-self: center;
          justify-self: center;
        "
      >
        的煎熬了大家觉得利夫卡就是代理费就是代理费尽量发吉萨大两房
      </div>
      <div style="height: 50px; flex: 1; background-color: green; order: 0">
        的煎熬了大家觉得利夫卡就是代理费就是代理费尽量发吉萨大两房
      </div>
      <div style="height: 50px; flex: 1; background-color: blue; order: 0">
        的煎熬了大家觉得利夫卡就是代理费就是代理费尽量发吉萨大两房
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-home {
  --my-color: red;
}
.new-home {
  --my-color: green;
}
.my-css {
  color: var(--my-color);
}
</style>
